﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <head>
        <meta charset="utf-8">
        <title>绿色生活-自然与环境</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="Greenlife - Nature & Environmental Non-Profit HTML5 Template">
        <meta name="author" content="xenioushk">
        <link rel="shortcut icon" href="images/favicon.png" />
        
        
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" >
        <link href="css/animate.css" rel="stylesheet" type="text/css" >
        <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" >
        <link href="css/venobox.css" rel="stylesheet" type="text/css" >
        <link rel="stylesheet" href="css/styles.css" />
        
    <body> 

        <div id="preloader">
            <span class="margin-bottom"><img src="images/loader.gif" alt="" /></span>
        </div>    
        <header class="main-header clearfix">

            <div class="top-bar">

                <div class="container">

                    <div class="row clearfix">

                        <div class="col-md-6 col-sm-12">

                            <span class="top-phone-no">
                                <i class="fa fa-phone-square"></i> 
                                +093-120-525-9162
                            </span>

                            <span class="top-email-info">
                                <i class="fa fa-paper-plane"></i>
                                <a href="#">123456@example.com</a>
                            </span>

                        </div> 

                        <div class="col-md-6 col-sm-12 text-right hidden-xs top-donation-btn-container">

                            <a href="join.jsp" title="Donate Now" class="btn top-donate-btn" >加入我们</a>
							<a href="JuanServlet" title="Donate Now" class="btn top-donate-btn" >捐赠</a>
                        </div> 

                    </div> 

                </div> 

            </div> 
            
            <section class="header-wrapper navgiation-wrapper">
            
                <div class="navbar navbar-default">         
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="logo" href="indexs.jsp"><img alt="" src="images/logo.png"></a>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="drop">
                                    <a href="IndexsServlet" title="Home Layout 01">首页</a>
                                    <ul class="drop-down">
                                    </ul>
                                </li>
                                <li class="drop"><a href="GreenInformationServlet">页面</a>
                                    <ul class="drop-down">
                                        <li><a href="GreenInformationServlet" title="About Us">关于我们</a></li>
                                        <li class="drop"><a href="galleryServlet">陈列室</a> 
                                        </li>
                                        <li><a href="JuanServlet" title="Donation">捐赠物</a></li> 
                                        </li>
                                    </ul>
                                </li>
                                
                                <li>
                                    <a href="YuanServlet">原因</a>
                                    <ul class="drop-down">
                                    </ul>
                                </li>
                                
                                <li>
                                    <a href="ShiServlet">事件</a>
                                    <ul class="drop-down">
                                    </ul>
                                </li>
                               
                            </ul>
                        </div>
                    </div>
                </div>
                
            </section>
                
         


        </header> <!-- end main-header  -->

        <!--  HOME SLIDER BLOCK  -->
        
        <!-- slider start -->
        <div class="slider-wrap">
            <div id="slider_1" class="owl-carousel owl-theme">
                
                <div class="item">
                    <img src="images/home_1_slider_1.jpg" alt="img">
                    <div class="slider-content">
                        <div class="container">
                            <h2>我爱罗永帅</h2>
                            <h3>拯救环境，拯救生命和未来</h3>
                            <a href="join.jsp" class="btn btn-slider">加入活动</a>
                            <a href="JuanServlet" class="btn btn-slider-2">立即捐款</a>
                        </div><!-- /.slider-content -->
                    </div>
                </div>
                
                <div class="item">
                    <img src="images/home_1_slider_2.jpg" alt="img">
                    <div class="slider-content">
                        <div class="container">
                            <h2>绿色生活环境</h2>
                            <h3>确保绿色健康的环境，让世界更美好</h3>
                            <a href="join.jsp" class="btn btn-slider">加入我们</a>
                            <a href="JuanServlet" class="btn btn-slider-2">立即捐款</a>
                        </div><!-- /.slider-content -->
                    </div>
                </div>
                
                
            </div>
        </div>
        <!-- slider end -->
        
        <!--  HOW WE WORK SECTION 1 -->

        <section class="section-content-block section-how-we-work section-secondary-bg">

            <div class="container">

                <div class="row">

                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <h2 class="section-heading"><span>Our</span> 目标</h2>
                        <p class="section-subheading">
                            提高人们对各种问题的认识
                        </p>
                    </div> <!-- end .col-sm-10  -->

                </div> <!--  end .row  -->

                <div class="row wow fadeInUp">

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        
                        <div class="service-block-bg">

                            <article class="service-block">
                                <h2>污染意识</h2>
                                <p>环境行动主义提高了人们对人类活动对环境的各种问题的认识.
                                    <br /><br />
                                </p>
                                
                                <i class="fa fa fa-flask"></i>

                            </article>

                        </div>
                    </div> <!--  end col-sm-6  -->
                    
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        
                        <div class="service-block-bg">

                            <article class="service-block">
                                <h2>还原酸雨</h2>
                                <p>环境行动主义提高了人们对人类活动对环境的各种问题的认识.
                                      <br /><br />
                                </p>
                                <i class="fa fa fa-line-chart"></i>
                            </article>

                        </div>

                    </div> <!--  end col-sm-6  -->

                </div> 

                <div class="row wow fadeInUp">

                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

                        <div class="service-block-bg">

                            <article class="service-block">

                                <h2>安全臭氧层</h2>
                                <p>环境行动主义提高了人们对人类活动对环境的各种问题的认识.
                                      <br /><br />
                                </p>
                                
                                <i class="fa fa fa-leaf"></i>

                            </article>

                        </div>

                    </div> <!--  end col-sm-6  -->
                    
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        
                        <div class="service-block-bg">

                            <article class="service-block">

                                <h2>阻止全球变暖</h2>
                                <p>环境行动主义提高了人们对人类活动对环境的各种问题的认识.
                                      <br /><br />
                                </p>
                                <i class="fa fa-area-chart"></i>
                            </article>
                            
                        </div>

                    </div> <!--  end col-sm-6  -->

                </div> <!-- end row  -->
                

            </div> <!--  end .container  -->

        </section> <!--  end .section-how-we-work -->
        
        <!--  CAUSE SECTION  -->

        <section class="section-content-block cause-section-1">

            <div class="container wow fadeInUp">

                <div class="row section-heading-wrapper">

                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <h2 class="section-heading section-heading-alt"><span>我们的</span> 目的</h2>
                         <p class="section-subheading section-subheading-alt">
                            提高人们对各种问题的认识
                        </p>
                    </div> <!-- end .col-sm-10  -->

                </div> <!-- end .row  -->

                <div class="row">
                    
                    <div class="cause-items">
						<c:forEach items="${requestScope.Reason}" var="us">
                        <div class="col-sm-12">

                            <div class="row">

                                <div class="cause-wrapper">

                                <div class="col-md-5 col-sm-12 hidden-xs no-padding">
                                    <figure class="cause-img">
                                        <img src="${us.img }" alt="Cause" />
                                        <a class="btn btn-default cause-button" href="JuanServlet">立即捐款</a>
                                    </figure> <!-- end .cause-img  -->
                                </div> <!-- end .col-sm-4  -->

                                <div class="col-md-7 col-sm-12 no-padding">

                                    <div class="cause-content">

                                        <div class="cause-text">
                                            <h5><a href="ReasonServlet?id=${us.id }&name=${us.theme}">${us.theme }</a></h5>
                                            <p>${us.theme }</p>
                                        </div> <!--  end .cause-text  -->

                                        <div class="progress">
                                            <div style="width: 50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar" class="progress-bar progress-bcm"></div>
                                            <span data-raised_percentage="50" class="fund-raised">${us.collect / us.targets * 100}%</span>
                                        </div> <!--  end .progress  -->

                                        <div class="fund-item-text">
                                            <span class="fund-raised-text">募捐到: $ ${us.collect }</span><span class="fund-goal-text">目标:$ ${us.targets }</span>
                                        </div> <!--  end .fund-item-text  -->

                                    </div> <!-- end .cause-content  -->

                                </div> <!-- end .col-sm-8  -->

                                </div> <!-- end .cause-wrapper  -->

                            </div> <!-- end .row  -->

                        </div> <!-- end .col-md-4  -->
                    </c:forEach>
                    </div>
                    
					
                </div> <!-- end .row  -->
                
                
            </div> <!-- end .container  -->

        </section> <!-- end .cause-section-1  -->
        
        
        <!-- TEAM SECTION 2 -->

        <section class="section-content-block section-our-team  section-pure-white-bg">

            <div class="container wow fadeInUp">
                
                <div class="row section-heading-wrapper">

                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <h2 class="section-heading section-heading">创始人</h2>
                         <p class="section-subheading section-subheading">
                            嘿嘿嘿！！！
                        </p>
                    </div> <!-- end .col-sm-10  -->

                </div> <!-- end .row  -->
				
                <div class="row">
				<c:forEach items="${requestScope.Founders}" var="u">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

                        <div class="team-layout-1 text-center xs-margin">       

                            <figure class="team-member">
                                <a href="#" title="Melissa Munoz">
                                    <img src="${u.image }" alt="" />
                                </a>
                            </figure> <!-- end. team-member  -->
                            <h3>${u.name }</h3>                                   
                            <h4>${u.type }</h4> 

                            <div class="team-social-share clearfix">

                                <a class="fa fa-facebook rectangle" href="#" title="Facebook"></a>
                                <a class="fa fa-twitter rectangle" href="#" title="Twitter"></a>
                                <a class="fa fa-google-plus rectangle" href="#" title="Google Plus"></a>
                                <a class="fa fa-linkedin rectangle" href="#" title="Linkedin"></a>

                            </div> <!-- end .author-social-box  -->

                        </div> <!--  end articles -->

                    </div> <!--  end .col-md-4 col-sm-12  -->
                        
					</c:forEach>
                </div> <!-- end .row  --> 
			
            </div> <!-- end .container  -->
			
        </section> <!--  end .section-our-team -->
        
        <!--  CTA SECTION  -->

       
        

        <!--  EVENT SECTION  -->

        <section class="section-content-block event-section-1 section-secondary-bg">

            <div class="container wow fadeInUp">

                <div class="row section-heading-wrapper">

                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <h2 class="section-heading"><span>即将到来的</span> 事件</h2>
                         <p class="section-subheading">
                             提高人们对各种问题的认识
                        </p>
                    </div> <!-- end .col-sm-10  -->

                </div> <!-- end .row  -->

                <div class="row">
                    <c:forEach items="${requestScope.Shi}" var="ue">
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">

                        <div class="event_wrapper xs-margin">
                            
                            <figure class="event-img">
                                
                                <img src="${ue.img }" alt="event" />
                                <p class="event-info">
                                    <span class="event-date"><i class="fa fa-calendar"></i> ${ue.dates }</span>
                                    <span class="event-location"><i class="fa fa-map-marker"></i> ${ue.author } </span>
                                </p>
                                
                            </figure> <!-- end .cause-img  -->
                            
                            <div class="event-content">

                                <div class="event-text">
                                    
                                    <h5><a href="DanShiServlet?id=${ue.id }">${ue.title }</a></h5>
                                    
                                </div> <!--  end .cause-text  -->


                            </div> <!-- end .cause-content  -->

                        </div><!-- end .custom-event-list-wrapper -->

                    </div> <!-- end .col-md-4  -->
					</c:forEach>
                </div> <!-- end .row  -->
                
           

            </div> <!-- end .container  -->

        </section> <!-- end .event-section-1  -->
        
        
        <!--  COUNTER SECTION  -->

        <section class="section-content-block section-counter">

            <div class="container-fluid wow fadeInUp">

                <div class="row">

                    <div class="col-md-2 col-sm-12">

                        <div class="counter-block-1 text-center">
                            
                            <h4>活动</h4>
                            <span class="counter">${requestScope.Huo[0].activity }</span>
                            
                        </div>

                    </div> <!--  end col-sm-3  -->

                    <div class="col-md-2 col-sm-12">

                        <div class="counter-block-1 text-center">

                            
                            <h4>志愿者</h4>
                            <span class="counter">${requestScope.GreenUser[0].greenUser }</span>
                            

                        </div>

                    </div> <!--  end col-sm-3  -->

                    <div class="col-md-2 col-sm-12">

                        <div class="counter-block-1 text-center">

                            
                            <h4>项目</h4>
                            <span class="counter">${requestScope.Xian[0].project }</span>
                            

                        </div>

                    </div> <!--  end col-sm-3  -->

                    <div class="col-md-2 col-sm-12">

                        <div class="counter-block-1 text-center">
                            
                            <h4>优秀志愿者</h4>
                            <span class="counter">${requestScope.You[0].outstandingUser }</span>

                        </div>

                    </div> <!--  end col-sm-3  -->
                    
                    <div class="col-md-2 col-sm-12">

                        <div class="counter-block-1 text-center">

                           
                            <h4>募捐金额</h4>
                            <span class="counter">${requestScope.Money[0].moeny }</span>

                        </div>

                    </div> <!--  end col-sm-3  -->
                    
                    <div class="col-md-2 col-sm-12">

                        <div class="counter-block-1 text-center">
                            
                            <h4>捐赠人数</h4>
                             <span class="counter">${requestScope.MoneyUser[0].moenyUser }</span>

                        </div>

                    </div> <!--  end col-sm-3  -->

                </div> <!-- end row  -->

            </div> <!--  end .container  -->

        </section> <!--  end .section-counter -->
    
        
        <!--  GALLERY CONTENT  -->

        <section class="section-content-block no-bottom-padding">

            <div class="container">
                
                <div class="row section-heading-wrapper">

                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <h2 class="section-heading"><span>照片</span> 陈列室</h2>
                        <p class="section-subheading">
                             提高人们对各种问题的认识
                        </p>
                    </div> <!-- end .col-sm-10  -->

                </div> <!-- end .row  -->

            </div> <!--  end .container -->
            
            
            
            
            <div class="container-fluid wow fadeInUp">
                

                <div class="row no-padding-gallery">
                
			<c:forEach items="${requestScope.tu}" var="donation"  begin="0" end="2">
                    <div class="col-md-3 col-sm-12 gallery-container">

                        <a class="gallery-light-box" data-gall="myGallery" href="images/${donation.img }">

                            <figure class="gallery-img">

                                <img src="images/${donation.img }" alt="gallery image" />

                            </figure> <!-- end .cause-img  -->

                        </a> <!-- end .gallery-light-box  -->

                    </div><!-- end .col-sm-3  -->
                    </c:forEach>
                </div> <!-- end .row  -->
                    
                <div class="row no-padding-gallery">
					<c:forEach items="${requestScope.tu}" var="donation"  begin="3" end="5">
                    <div class="col-md-6 col-sm-12 gallery-container">

                        <a class="gallery-light-box"  data-gall="myGallery" href="images/${donation.img }">

                            <figure class="gallery-img">

                                <img src="images/${donation.img }" alt="gallery image" />

                            </figure> <!-- end .cause-img  -->

                        </a>

                    </div><!-- end .col-sm-3  -->
			</c:forEach>
                </div> <!-- end .row  -->
                
            </div><!-- end .container-fluid  -->

        </section> <!-- end .section-content-block  -->
        
        <!-- CLIENT LOGO SECTION  -->

        <section class="section-content-block section-client-logo">

            <div class="container wow fadeInUp">
                
                <div class="row">

                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <h2 class="section-heading"><span>Our</span> 捐助者</h2>
                        <p class="section-subheading">
                             提高人们对各种问题的认识
                        </p>
                    </div> <!-- end .col-sm-10  -->

                </div> <!--  end .row  -->

                <div class="row">

                    <div class="logo-items logo-layout-1 text-center">

                        <div class="logo">

                            <img src="images/logo_1.png" alt="" />

                        </div>

                        <div class="logo">

                            <img src="images/logo_2.png" alt="" />

                        </div>

                        <div class="logo">

                            <img src="images/logo_3.png" alt="" />

                        </div>

                        <div class="logo">

                            <img src="images/logo_4.png" alt="" />

                        </div>

                        <div class="logo">

                            <img src="images/logo_5.png" alt="" />

                        </div>


                    </div> <!-- end .testimonial-container  -->

                </div> <!-- end row  -->

            </div> <!-- end .container  -->

        </section> <!--  end .section-client-logo -->
        
        <!--  NEWSLETTER SECTION  -->

        
        <!-- FOOTER  -->
        
       <footer>
        <!-- FOOTER WIDGET AREA -->

            <section class="section-content-block footer-widget-area-bg">
                <div class="container wow fadeInUp">
                    
                    <div class="row">

                        <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                            <div class="footer-widget-area">
                                <figure class="footer-logo-img text-center">
                                    <img alt="Logo" src="images/logo.png">
                                </figure> <!-- end .cause-img  -->
                                <div class="contact-info">
                                <p>走进明日，从今天开始。共建绿色家园，迈向可持续未来！</p>
                                </div>
                                <div class="contact-info">
                                    <div class="contact-details">
                                        <div class="social-icons margin-top-20">
                                            <a href="#">
                                            <i class="fa fa-facebook"></i>
                                            </a>
                                            <a href="#">
                                            <i class="fa fa-twitter"></i>
                                            </a>
                                            <a href="#">
                                            <i class="fa fa-pinterest-p"></i>
                                            </a>
                                            <a href="#">
                                            <i class="fa fa-instagram"></i>
                                            </a>
                                            <a href="#" class="margin-right-0">
                                            <i class="fa fa-linkedin"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- end .col-md-4  -->

                    </div> <!-- end .row  --> 
                </div> <!-- end .container  -->
            </section> <!--  end .footer-widget-area-bg -->

            <!--FOOTER CONTENT  -->

            <section class="footer-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                             <span>
                            Copyright © 2024. 保留所有权利
                            <a class="color-primary" href="http://www.bootstrapmb.com/">bluewindlab.com</a>
                            </span>
                        </div> <!-- end .col-md-6  --> 
                      
                    </div> <!-- end .row  --> 
                </div> <!-- end .container  --> 
            </section>  <!--  end .footer-area -->
            
        </footer> <!--  end of footer -->

        <!-- Back To Top Button  -->

        <a id="backTop">返回顶部</a>
       
        <script src="js/jquery.min.js"></script>
       <script src="js/bootstrap.min.js"></script>
       <script src="js/wow.min.js"></script>
       <script src="js/jquery.backTop.min.js "></script>
       <script src="js/waypoints.min.js"></script>
       <script src="js/waypoints-sticky.min.js"></script>
       <script src="js/owl.carousel.min.js"></script>
       <script src="js/jquery.stellar.min.js"></script>
       <script src="js/jquery.counterup.min.js"></script>
       <script src="js/venobox.min.js"></script>
       <script src="js/custom-scripts.js"></script>
   </body>

</html>